import styles from "./index.module.scss";
import { Pagination, Tooltip } from "antd";
import { useDispatch, useSelector } from "react-redux";
import closeBtn from "@/assets/public/close-btn.png";
import closeBtnLight from "@/assets/public/close-btn-light.png";
import { setLayersLevel2 } from "@/store";

export default function Model(props) {
  const dispatch = useDispatch();
  const { name } = props;
  const theme = useSelector((state) => state.theme);
  const layers = useSelector((state) => {
    return state.layersLevel2;
  });
  const handleClose = () => {
    dispatch(
      setLayersLevel2({
        query: {},
        name: "",
        other: {},
      })
    );
  };

  const getValue = (value) => {
    console.log(value);
  };
  return (
    <div className={styles.model}>
      <header className={styles.header}>
        {theme ? (
          <img
            style={{
              width: "20px",
              height: "22px",
            }}
            onClick={handleClose}
            src={closeBtnLight}
            alt="加载中..."
          />
        ) : (
          <img
            style={{
              width: "20px",
              height: "22px",
            }}
            onClick={handleClose}
            src={closeBtn}
            alt="加载中..."
          />
        )}
        <span className={styles.title}>{name}</span>
      </header>
      <div className={styles.detail}>
        <div className={styles.detailLine}>
          <div className={styles.detailName}>姓名</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="姓名">
              姓名
            </span>
          </div>
          <div className={styles.detailName}>电话</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="电话">
              电话
            </span>
          </div>
          <div className={styles.detailName}>性别</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="性别">
              性别
            </span>
          </div>
        </div>
        <div className={styles.detailLine}>
          <div className={styles.detailName}>身份证</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="身份证">
              身份证
            </span>
          </div>
          <div className={styles.detailName}>部门</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="部门">
              部门
            </span>
          </div>
          <div className={styles.detailName}>直属主管</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="直属主管">
            直属主管
            </span>
          </div>
        </div>
        <div className={styles.detailLine}>
          <div className={styles.detailName}>一级项目</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="一级项目">
              一级项目
            </span>
          </div>
          <div className={styles.detailName}>二级项目</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="二级项目">
              二级项目
            </span>
          </div>
          <div className={styles.detailName}>我方承担公司部分比例</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="我方承担公司部分比例">
            我方承担公司部分比例
            </span>
          </div>
        </div>
        <div className={styles.detailLine}>
          <div className={styles.detailName}>我方承担员工部分比例</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="我方承担员工部分比例">
            我方承担员工部分比例
            </span>
          </div>
          <div className={styles.detailName}>我方承担管理部分比例</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="我方承担管理部分比例">
            我方承担管理部分比例
            </span>
          </div>
          <div className={styles.detailName}>代缴公司</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="代缴公司">
            代缴公司
            </span>
          </div>
        </div>
        <div className={styles.detailLine}>
          <div className={styles.detailName}>缴纳区域</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="缴纳区域">
            缴纳区域
            </span>
          </div>
          <div className={styles.detailName}>人员编号</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="人员编号">
            人员编号
            </span>
          </div>
          <div className={styles.detailName}>参保状态</div>
          <div className={styles.detailContent}>
            <span className="text-overflow" title="参保状态">
            参保状态
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}
